<template>
    <input type="text" v-model="username" /><br />
    {{ username }}
    <input type="text" v-model="info.name" /><br />
    {{ info.name }}
    <input type="text" v-model="name" /><br />
    {{ name }}
    <input type="text" v-model="age" /><br />
    {{ age }}
    <input type="text" v-model="readname" /><br />
    {{ readname }}
</template>

<script setup>
    import {ref,reactive,toRef,toRefs,readonly} from 'vue'

    let username = ref('张三')

    setTimeout(() => {
        username.value = '李四'
    },3000)

    let info = reactive({
        name: '张三',
        age:20,
        sex:'男'
    })

    setTimeout(() => {
        info.name = '李四'
        info.age = 30
        info.sex= '女'
    },3000)

    let name = toRef(info,'name')

    let {sex,age} = toRefs(info)
    let readname = readonly(username)
</script>